<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

<title>新增月子服务</title>
</head>
<body>
<div class="pd-20">
	<form action="/baby/usaBabyMonth/addUsaBabyMonth" method="post" class="form form-horizontal" id="form"  enctype="multipart/form-data">

		<div class="row cl">
			<label class="form-label col-1">所属Menu:</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="menutype" class="select" id="menu">
					<option value="-1">请选择一个Menu</option>
				</select>
				</span> </div>
		</div>
	<!-- 	<div class="row cl">
			<label class="form-label col-1">类别:</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="type" class="select">
					<option value="1">待产生活</option>
					<option value="2">月子生活</option>
					<option value="3">母婴护理</option>
				</select>
				</span> </div>
		</div> -->
	<div class="row cl">
			<label class="form-label col-1">标题:</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="" id="" name="title">
       
			</div>
		</div>

    <style type="text/css">
      #view{}
      #view{} .imgbox{float:left;position:relative;width:100px;height: 100px;margin-left: 10px;margin-top: 10px;
      padding:5px;border:solid 1px red;border-radius: 5px;;}
      #view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
      width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
      #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
    </style>
    <div class="row cl">
      <label class="form-label col-1">图片上传：</label>
      <div class="formControls col-10">
        <input type="file" name="file" id="file" datatype="*" nullmsg="请上传图片"  onchange="load(this)"  multiple="multiple" accept="image/*" class='myfile'></input>
        <div id="view"></div>
      </div>
    </div>
		

	 <div class="row cl">
      <label class="form-label col-1">服务简介:</label>
      <div class="formControls col-8"> 
        <script id="editor" type="text/plain" style="width:100%;height:400px;" name="introduce"></script> 
      </div>
    </div>


		<div class="row cl">
			<div class="col-10 col-offset-1">
				<input type="button" class="btn btn-primary radius"  onclick="check()" name="submit" value="保存" id="sub"class="submit" />
			</div>
		</div>

	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script src="js/jquery-form.js" type="text/javascript"></script>

<script>
$('body').on('click','.close',function(){
  $(this).parent('.imgbox').remove();
});

$(document).ready(function(){
	var url=getQueryString('url');
	getMenu();
        $('#form').ajaxForm(function(data){

            //alert(data);//弹出ajax请求后的回调结果，data回调数据  onclick="sub()"
            if(data.code =="2000" ){ 
             alert(data.message); 
             window.location.href=url;
            }else{  
              alert(data.message); 
            }  
        });

});

function check(){
	
	var options=$("#menu option:selected");  
	if(options.val() ==-1){
		alert('请选择一个所属menu');
		return;
	}
	 $('#form').submit();
}

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }

function load(file) {
  var num=1;
  if (file.files) {
  	$('.imgbox').remove()
  for (var i = 0; i < file.files.length; i++) {
  var reader = new FileReader();
  reader.readAsDataURL(file.files[i]);
  reader.onload = function(evt) {
  var imgbox=$('<div></div>');
  imgbox.addClass('imgbox');
  $('#view').append(imgbox);

  var imgs = $('<input type="image" />');
  imgs.attr('name','mum'+num);
  num++;
  imgs.appendTo(imgbox);
  imgs.attr('src', evt.target.result);
  }
}
}
}

var ue = UE.getEditor('editor');

// 加载menu 
function  getMenu(){
	$.ajax({  
	    url:'/baby/menu/queryMenu',// 跳转到 action  
	    data:{},  
	    type:'post',  
	    cache:false,  
	    dataType:'json',  
	    success:function(data) { 
	        if(data.code =="2000" ){
		        var data = data.data;
		        var str='';
		        for(var i=0;i<data.length;i++){
		        	str+='<option value="'+data[i].sid+'">'+data[i].title+'</option>'
		        }
		        $("#menu").append(str);
		        
	        }
	      }, 
	      error : function() {      
	        alert("异常！");  
	    }  
	  });
}
</script>
</body>
</html>